<template>
  <a href="javascript:;" class="u-btn2 u-btni" title="播放" @mouseup="play">
    <i class="u-btn2 u-btni"> <em class="ply"></em>播放</i>
  </a>
</template>

<script>
import { inject } from "@vue/runtime-core";
export default {
  name: "SongPlay",
  setup() {
    const play = inject("Cplay");
    return {
      play,
    };
  },
};
</script>

<style scoped lang="less">
.u-btn2 {
  overflow: hidden;
  text-align: center;
  background: url("../../common/images/button2.png") no-repeat right -428px;
  cursor: pointer;
  i {
    padding: 0 7px 0 8px;
    vertical-align: top;
    background: url("../../common/images/button2.png") no-repeat 0 -387px;
    color: #fff;
  }
  .ply {
    float: left;
    width: 20px;
    height: 18px;
    margin: 6px 2px 2px 0;
    background-position: 0 -1622px;
    overflow: hidden;
    background: url("../../common/images/button2.png") no-repeat 0 -1622px;
  }
}
</style>
